<template>
  <div class="app-container">
    <el-button @click="add" type="primary">测试添加留言</el-button>
    <el-table
      v-loading="listLoading"
      :data="list"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
    >
      <el-table-column align="center" label="留言ID" width="64">
        <template slot-scope="scope">
          {{ scope.row.note_id }}
        </template>
      </el-table-column>
      <el-table-column align="center" label="订单ID" width="64">
        <template slot-scope="scope">
          {{ scope.row.order_id }}
        </template>
      </el-table-column>
      <el-table-column label="姓名" width="120">
        <template slot-scope="scope">
          <router-link :to="`/userApply/applydetail/${scope.row.openid}`">
            {{ `${scope.row.name}(${scope.row.nickname})` }}
          </router-link>
        </template>
      </el-table-column>
      <el-table-column label="留言内容">
        <template slot-scope="scope">
          {{ scope.row.content }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="65">
        <template slot-scope="scope">
          <el-button
            @click="isDelete(scope.row.note_id)"
            type="danger"
            class="del_btn el-icon-delete"
            title="删除留言"
            size="mini"
            round
          ></el-button>
        </template>
      </el-table-column>
      <el-table-column
        align="center"
        prop="create_at"
        label="最后一次修改时间"
        width="180"
      >
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span>{{ scope.row.create_at | showTime }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { parseTime } from "@/utils/index";
import { getNote, addNote, deleteNote } from "@/api/note";
export default {
  data() {
    return {
      list: null, //留言列表
      listLoading: true //页面是否在渲染
    };
  },
  created() {
    this.fetchData(); // 初始化时渲染界面
  },
  methods: {
    // 渲染列表
    fetchData() {
      getNote().then(res => {
        this.list = res.data.data;
        console.log(res.data.data);
        this.listLoading = false;
      });
    },
    // 提示成功并刷新
    tipRefresh(res, isFresh = true) {
      //提示并刷新页面
      this.$message({
        message: res.data.meta.msg,
        type: "success",
        onClose: () => {
          if (isFresh) {
            window.location.reload(); //更新页面
          }
        }
      });
    },
    add() {
      addNote({
        order_id: 65,
        content: new Date(),
        openid: "onCvY5VL9dMTgCM5mb_SpjbatFRc"
      }).then(res => {
        this.tipRefresh(res, true);
      });
    },
    isDelete(noteID) {
      deleteNote({ note_id: noteID }).then(res => {
        this.tipRefresh(res, true);
      });
    }
  },
  filters: {
    // 时间展示
    showTime(t) {
      return parseTime(new Date(t));
    }
  }
};
</script>

<style scoped></style>
